<template>
  <div class="container-fluid row" style="height: 100%">
    <div>
      <div
        class="col-lg-3 col-md-4 col-sm-5 position-absolute top-50 start-50 translate-middle"
      >
        <h4 class="text-center" style="line-height: 60px">
          <img
            alt="LumbaShark"
            height="80"
            src="../../assets/Logo.png"
            width="80"
          />
        </h4>
        <div class="card" v-if="store.status.pulling">
          <div class="card-body text-center">
            <span
              ><b>{{ $t("common.loading") }}</b></span
            >
          </div>
        </div>
        <div class="card" v-else-if="store.account.accountGroup != null">
          <div class="card-body text-center pb-0">
            <h6>{{ $t("developer.signup.title") }}</h6>
            <span class="text-secondary"
              >{{ $t("developer.signup.cannot.tips.0")
              }}<b>{{ store.account.accountProfile.username }}</b
              >({{ $t("developer.signup.cannot.tips.1") }}
              <b>{{ store.account.accountGroup.name }}</b
              >)</span
            >
          </div>
          <hr />
          <div class="card-body pt-0">
            <div>
              <div class="pb-3">
                <span>{{ $t("developer.signup.cannot.description") }} </span>
              </div>
              <n-button
                :loading="pushing"
                style="width: 100%"
                type="primary"
                @click="this.$router.push({ name: 'introduce' })"
              >
                {{ $t("common.actions.goback") }}
              </n-button>
            </div>
          </div>
        </div>
        <div class="card" v-else>
          <div class="card-body text-center pb-0">
            <h6>{{ $t("developer.signup.title") }}</h6>
            <span class="text-secondary"
              >{{ $t("developer.signup.tip")
              }}<b>{{ store.account.accountProfile.username }}</b></span
            >
          </div>
          <hr />
          <div class="card-body pt-0">
            <div>
              <div class="pb-3">
                <span
                  >{{ $t("developer.signup.descriptions.0") }}
                  <router-link
                    :to="{ name: 'agreement', query: { page: 'developer-agreement' } }"
                    >{{ $t("developer.signup.descriptions.1") }}</router-link
                  >
                  {{ $t("developer.signup.descriptions.2") }}
                </span>
              </div>
              <n-button
                :loading="pushing"
                style="width: 100%"
                type="primary"
                @click="submit"
              >
                {{ $t("developer.signup.title") }}
              </n-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="loading" v-show="store.status.pulling">
      <loading :active="store.status.pulling" is-full-screen />
    </div>
  </div>
</template>

<script setup>
import axiosHttp from "axios";
import Loading from "vue-element-loading";
import { NButton, useMessage } from "naive-ui";
import { ref } from "vue";
import { RouterLink, useRouter } from "vue-router";
import { useCookies } from "vue3-cookies";
import { useStore } from "../../stores/main";
import { useI18n } from "vue-i18n";

const axios = axiosHttp.create({ validateStatus: () => true });
const { cookies } = useCookies();

const { t } = useI18n();
const store = useStore();
const router = useRouter();
const message = useMessage();

const pushing = ref(false);

function submit() {
  pushing.value = true;
  axios
    .post(
      "/api/management/developer/signup",
      {},
      { headers: { Authorization: "Bearer " + cookies.get("access_token") } }
    )
    .then((response) => {
      if (response.status === 201) {
        message.success(t("developer.signup.messages.success"));
        pushing.value = false;
        router.push({ name: "introduce" }).then(() => router.go());
      } else {
        message.error(t("common.messages.request-unknown-error"));
        console.error("Request response errors: ", response);
        pushing.value = false;
      }
    })
    .catch((error) => {
      message.error(t("common.messages.request-unknown-error"));
      console.error("Request response errors: ", error);
      pushing.value = false;
    });
}
</script>
